/**
 * Created by aflyi on 2017/5/8.
 */
window.onload = function () {
    Banner();
    function Banner(){
        var oSlide = document.querySelector('.slide');
        var oUl = oSlide.querySelector('ul');
        oUl.innerHTML +=  oUl.innerHTML;
        var aLi = oUl.querySelectorAll('li');
        var aTab = oSlide.querySelectorAll('.tab span');
        aTab[0].className = 'on';
        oUl.style.width = aLi.length+'00%';

        var startPoint = 0;
        var startX = 0;

        var timer;
        var num =0;

        cssTransform(oUl,'translateX',0);

        oSlide.addEventListener('touchstart',function (e) {
            clearInterval(timer);
            oUl.style.transition = '';
            var l = cssTransform(oUl,'translateX');
            num = Math.round(-l/oSlide.offsetWidth);

            if( num == 0 ){
                num = aTab.length;
            }
            if( num == aLi.length-1 ){
                num = aTab.length-1;
            }
            cssTransform(oUl,'translateX',-num*oSlide.offsetWidth);

            startPoint = e.changedTouches[0].pageX;
            startX = cssTransform(oUl,'translateX');
        });

        oSlide.addEventListener('touchmove',function (e) {
            var nowPoint = e.changedTouches[0].pageX;
            var disX = nowPoint - startPoint;
            translateX = disX + startX;
            cssTransform(oUl,'translateX',translateX);
        });
        oSlide.addEventListener('touchend',function (e) {
            var l = cssTransform(oUl,'translateX');
            num = Math.round(-l/oSlide.offsetWidth);

            autoPlay();
            tab();
        });
        autoPlay();
        function autoPlay() {
            timer = setInterval(function () {
                if( num == aLi.length-1 ){
                    num = aTab.length-1;
                }
                oUl.style.transition = '';
                cssTransform(oUl,'translateX',-num*oSlide.offsetWidth);
                setTimeout(function () {
                    num++;
                    tab();
                },50)
            },2000);
        }

        function tab() {
            oUl.style.transition = '0.5s';

            cssTransform(oUl,'translateX',-num*oSlide.offsetWidth);
            for (var i=0;i<aTab.length;i++){
                aTab[i].className = '';
            }
            aTab[num%aTab.length].className = 'on';
        }
    }
    //滑动导航
    (function () {
        var nav=document.querySelector('.header .hd-move');
        var oUl=nav.querySelector('ul');
        var startPoint=0;
        var startX=0;

        var lastX=0;//上次的距离
        var lastTime=new Date().getTime();//上次的时间,ms
        var lastDis=0;
        var lastTimeDis=0;

        var maxX=nav.clientWidth-oUl.offsetWidth;
        var step=1;


        cssTransform(oUl,'translateX',0);
        nav.addEventListener("touchstart",function (e) {
            startPoint=e.changedTouches[0].pageX;
            startX=cssTransform(oUl,"translateX");
        })

        nav.addEventListener("touchmove",function (e) {
           var newPoint=e.changedTouches[0].pageX;
           var disX=newPoint-startPoint;
           var l=disX+startX;
           if(l>0){
               step= 1-l/nav.clientWidth;
               l=parseInt(l*step);
           }
           if(l<maxX){
               var L=maxX -l;
               step=1- l/nav.clientWidth;
               L=parseInt(L*step);
               lastDis=l-lastX;
               lastTimeDis=nowTime-lastTime;
           }
           cssTransform(oUl,'translateX',l);
        });
        nav.addEventListener("touchend",function (e) {
            var speed=(lastDis/lastTimeDis)*200;
            var l=cssTransform("oUl",'translateX');
            oUl.style.webkitTransform="transform 600ms "
            var target=l+speed;
        })
        //速度快 移动距离就远
        //速度慢 移动距离就近
        //
    })();
};
























